/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Button,
    InputLine,
    Input,
    TextArea,
    Select,
    InputDatalist,
    Layer,
    Popover,
    PopoverRefer,
    IconChevronDown,
    PopoverContent,
    PopoverDescription,
    MenuList,
    MenuItem,
    PopoverClose,
    IconX,
    Text,
    CheckSwitch,
    LineColumn,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout,
    InternalItemProps,
    useItemInputControl
} from "../common/base";
import queryString from "query-string";

export const 结果打勾等的=['√','×','无此项','-'];

//公共的复用性好的组件；编辑、原始记录，在多数模板能通用的。不通用的要安排放在更加具体贴近的目录文件内。
//方便不同模板和不同版本的可重复引用。文件目录管理，组件按照抽象性程度和参数配置的关联度，分级分层次，标识容易区分开。


//即使多版本间会有调整的，还可以添加注入的参数或者内部逻辑判定来适应。
export const ItemSurveyLinkMan=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            //devCod,检验日期：这些字段要提升到关系数据库表中，json半结构化数据的就不做保留。
            //安全人员,联系电话：放json，算是过度性质输入形态。报告正式批准/终结后，就该触发修改同步到库表中去。也可反馈给下一次定期检验，继承或修改。
            const {eqpcod,检验日期,安全人员,联系电话} =par||{};
            return {eqpcod,检验日期,安全人员,联系电话};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        console.log(`ItemSurveyLinkMan 编辑器报告的:inp`, inp);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'检验结论报告-设备概况'} column={0}>
                <InputLine  label='设备号{不能改}' >
                    <Input  value={inp?.eqpcod ||''}  readOnly />
                </InputLine>
                允许直接修改部分：
                <InputLine  label='检验日期' >
                    <Input value={inp?.检验日期 ||''}  placeholder="基准日" type='date'
                           onChange={e => setInp({ ...inp, 检验日期: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='安全管理人员' >
                    <Input  value={inp?.安全人员 ||''}
                            onChange={e => setInp({ ...inp, 安全人员: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='安全人员联系电话' >
                    <Input  value={inp?.联系电话 ||''}
                            onChange={e => setInp({ ...inp, 联系电话: e.currentTarget.value||undefined}) } />
                </InputLine>
                其它不可修改的字段：点设备台账链接修改或改用申请单方式修改。
            </InspectRecordLayout>
        );
    } );

//下结论页面：
export const ItemConclusionVs=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            //检验人IDs编制日期编制人结论：这些字段要提升到关系数据库表中，而不是json字段里面。只能保留上级语义更强的，json半结构化数据的就不做保留。
            const {结论压力,结论介质,安全状况等级,检验结论,结论温度,结论其它,下检日期,结论说明} =par||{};
            return {结论压力,结论介质,安全状况等级,检验结论,结论温度,结论其它,下检日期,结论说明};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'检验结论-检查结论'} column={0}>
                检验结论-检查结论
                <InputLine  label='压力容器安全状况等级评定为' >
                    <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                            value={ inp?.安全状况等级  ||''}
                            onChange={e => setInp({ ...inp, 安全状况等级: e.currentTarget.value||undefined}) }
                    >
                        <option></option>
                        <option>1级</option>
                        <option>2级</option>
                        <option>3级</option>
                        <option>4级</option>
                        <option>5级</option>
                    </Select>
                </InputLine>
                <InputLine  label='检查结论' >
                    <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                            value={ inp?.检验结论  ||''}
                            onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }
                    >
                        <option></option>
                        <option>符合要求</option>
                        <option>基本符合要求</option>
                        <option>不符合要求</option>
                    </Select>
                </InputLine>
                允许（监控）使用参数
                <InputLine  label='压力' >
                    <Input  value={inp?.结论压力 ||''}
                            onChange={e => setInp({ ...inp, 结论压力: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='介质' >
                    <Input  value={inp?.结论介质 ||''}
                            onChange={e => setInp({ ...inp, 结论介质: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='温度' >
                    <Input  value={inp?.结论温度 ||''}
                            onChange={e => setInp({ ...inp, 结论温度: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='其它' >
                    <Input  value={inp?.结论其它 ||''}
                            onChange={e => setInp({ ...inp, 结论其它: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='下次定期检验日期' >
                    <Input  value={inp?.下检日期 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 下检日期: e.currentTarget.value}) } />
                </InputLine>
                说明
                <TextArea  value={inp?.结论说明 ||''} rows={10}
                           onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
            </InspectRecordLayout>
        );
    } );

//资料审查：
export const InformationReview=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            //检验人IDs编制日期编制人结论：这些字段要提升到关系数据库表中，而不是json字段里面。只能保留上级语义更强的，json半结构化数据的就不做保留。
            const {上次缺陷处理,上次定检报告号,上次评级,上次定检日期,资料审查情况} =par||{};
            return {上次缺陷处理,上次定检报告号,上次评级,上次定检日期,资料审查情况};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'资料审查-审查情况'} column={0}>
                资料审查-资料审查情况
                <TextArea  value={inp?.资料审查情况 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 资料审查情况: e.currentTarget.value||undefined}) } />
                上次定期检验问题记载
                <InputLine  label='上次定期检验报告编号' >
                    <Input  value={inp?.上次定检报告号 ||''}
                            onChange={e => setInp({ ...inp, 上次定检报告号: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='上次定期检验日期' >
                    <Input  value={inp?.上次定检日期 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 上次定检日期: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='上次定期检验安全状况等级评为' >
                    <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                            value={ inp?.上次评级  ||''}
                            onChange={e => setInp({ ...inp, 上次评级: e.currentTarget.value||undefined}) }
                    >
                        <option></option>
                        <option>1级</option>
                        <option>2级</option>
                        <option>3级</option>
                        <option>4级</option>
                        <option>5级</option>
                    </Select>
                </InputLine>
                上次定期检验问题记载-检验发现的缺陷及处理情况
                <TextArea  value={inp?.上次缺陷处理 ||''} rows={5}
                           onChange={e => setInp({ ...inp, 上次缺陷处理: e.currentTarget.value||undefined}) } />
            </InspectRecordLayout>
        );
    } );

//注意配置变量的一一对应。
const checkConfig几何=[['筒体同一断面上最大内径与最小内径之差','大小内径差'],['纵（环）焊缝最大对口错边量','对口错边量'],['纵（环）焊缝最大棱角度','大棱角度'],
    ['纵（环）焊缝最大咬边','大咬边'],['纵（环）焊缝最大余高','大余高']];
export const Geometric=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig几何.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'宏观检验-几何尺寸及焊缝检查'} column={0}>
                宏观检验-几何尺寸及焊缝检查:
                {
                    checkConfig几何.map(([title,aName], i:number)=> {
                        return <LineColumn  key={i} column={2}>
                            <InputLine label={title+`:`}>
                                <InputDatalist value={inp?.[aName] || ''} datalist={结果打勾等的}
                                               onListChange={v => {
                                                   inp[aName] = v || undefined;
                                                   setInp({...inp});
                                               } } />
                            </InputLine>
                            <InputLine  label='备注' >
                                <Input  value={inp?.[aName+'_D'] ||''}
                                        onChange={e => {
                                            inp[aName+'_D'] = e.currentTarget.value || undefined;
                                            setInp({...inp});
                                        } } />
                            </InputLine>
                        </LineColumn>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

const checkConfig结构=[['封头型式','封头型式'],['封头与筒体的连接','封筒连接'],['开孔位置及补强','开孔补强'],
    ['纵（环）焊缝的布置及型式','焊缝布置'],['支承或者支座的型式与布置','支承型式'],['排放〈疏水、排污)装置的设置','排放设置']];
/**宏观检验 结构检查：
 * */
export const Structural=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig结构.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        //这个位置inp已经只有一小部分的字段了；ref在独立编辑器模式=null;
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'宏观检验-结构检查'} column={0}>
                宏观检验-结构检查
                {
                    checkConfig结构.map(([title,aName], i:number)=> {
                        return <LineColumn  key={i} column={2}>
                                <InputLine label={title+`:`}>
                                    <InputDatalist value={inp?.[aName] || ''} datalist={结果打勾等的}
                                                   onListChange={v => {
                                                       inp[aName] = v || undefined;
                                                       setInp({...inp});
                                                   } } />
                                </InputLine>
                                <InputLine  label='备注' >
                                    <Input  value={inp?.[aName+'_D'] ||''}
                                            onChange={e => {
                                                inp[aName+'_D'] = e.currentTarget.value || undefined;
                                                setInp({...inp});
                                            } } />
                                </InputLine>
                          </LineColumn>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

const checkConfig壳体=[['铭牌和标志','铭牌标志'],['内外表面的腐蚀','表面腐蚀'],['裂纹、泄漏、鼓包、变形、机械接触损伤、过热','裂纹过热'],['工卡具焊迹、电弧灼伤','卡具焊迹'],
    ['法兰、密封面及其紧固螺栓','法兰密封'],['支承、支座或者基础的下沉、倾斜、开裂','下沉倾斜'],['地脚螺栓','地脚螺栓'],['直立容器和球形容器支柱的铅垂度','支柱铅垂度'],
    ['多支座卧式容器的支座膨胀孔','支座膨胀孔'],['排放（疏水、排污）装置和泄漏信号指示孔的堵塞、 腐蚀、沉积物','排放堵塞']];
export const Appearance=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig壳体.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'宏观检验-壳体外观检验'} column={0}>
                宏观检验-壳体外观检验:
                {
                    checkConfig壳体.map(([title,aName], i:number)=> {
                        return <LineColumn  key={i} column={2}>
                            <InputLine label={title+`:`}>
                                <InputDatalist value={inp?.[aName] || ''} datalist={结果打勾等的}
                                               onListChange={v => {
                                                   inp[aName] = v || undefined;
                                                   setInp({...inp});
                                               } } />
                            </InputLine>
                            <InputLine  label='备注' >
                                <Input  value={inp?.[aName+'_D'] ||''}
                                        onChange={e => {
                                            inp[aName+'_D'] = e.currentTarget.value || undefined;
                                            setInp({...inp});
                                        } } />
                            </InputLine>
                        </LineColumn>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

const checkConfig隔热=[['隔热层破损、脱落、潮湿及层下腐蚀、裂纹','隔热破损'],['衬里层的破损、腐蚀、裂纹、脱落及检查孔介质 流出情况','衬里流出'],['堆焊层的龟裂、剥离和脱落','堆焊龟裂'],
    ['夹层真空度','夹层真空'],['日蒸发率','日蒸发率'],['备注','宏观检验备注'],['结果','宏观检验结果']];
export const InsulationLayer=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig隔热.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'宏观检验-隔热层、衬里检验'} column={0}>
                宏观检验-隔热层、衬里检验:
                {
                    checkConfig隔热.map(([title,aName], i:number)=> {
                      if(i<checkConfig隔热.length-2)
                            return <React.Fragment key={i}>
                                {i===3 && '宏观检验-其他检验:'}
                                <LineColumn  column={2}>
                                    <InputLine label={title+`:`}>
                                        <InputDatalist value={inp?.[aName] || ''} datalist={结果打勾等的}
                                                       onListChange={v => {
                                                           inp[aName] = v || undefined;
                                                           setInp({...inp});
                                                       } } />
                                    </InputLine>
                                    <InputLine  label='备注' >
                                        <Input  value={inp?.[aName+'_D'] ||''}
                                                onChange={e => {
                                                    inp[aName+'_D'] = e.currentTarget.value || undefined;
                                                    setInp({...inp});
                                                } } />
                                    </InputLine>
                                </LineColumn>
                            </React.Fragment>;
                        else return null;
                    })
                }
                宏观检验-备注:
                <TextArea  value={inp?.宏观检验备注 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 宏观检验备注: e.currentTarget.value||undefined}) } />
                宏观检验-结果:
                <InputLine  label='结果' >
                    <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                            value={ inp?.宏观检验结果  ||''}
                            onChange={e => setInp({ ...inp, 宏观检验结果: e.currentTarget.value||undefined}) }
                    >
                        <option></option>
                        <option>符合要求</option>
                        <option>基本符合要求</option>
                        <option>不符合要求</option>
                    </Select>
                </InputLine>
            </InspectRecordLayout>
        );
    } );

//定义的字段名字要确保在本报告模板以内的以及台账snapshot范围以内的唯一性标识！相互覆盖修改值，若和台账DeviceSnapshot相同的会被台账'型号'覆盖掉！所以必须修改哦名字='安全阀型号';
const checkConfig安全=[['型号','安全阀型号'],['数量','安全阀数量'],['校验日期','阀校验日'],['校验记录编号','阀校验记录号'],
    ['整定压力','阀整定压力'],['安装位置','阀安装位置'],['型号','爆破片型号'],['数量','爆破片数量'],['规格','片规格'],
    ['更换周期要求','片更换周期'],['更换日期','片更换日'],['安装位置','片安装位置']];
export const SafetyValve=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig安全.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        //【有问题的是LineColumn】没办法穿透<>和<React.Fragment>俩个空白语法标签；儿子不能放在这两个底下。
        const partOf =React.useCallback((start: number,end: number) => {
            return <LineColumn  key={end} column={2}>
                {
                    checkConfig安全.map(([title,aName], i:number)=> {
                        if(i>=start && i<=end){
                            if(i===10 || i===2)
                                return <InputLine key={i} label={title+`:`}>
                                         <Input  value={inp?.[aName] || ''}  type='date'
                                               onChange={e => {
                                                inp[aName] = e.currentTarget.value;
                                                setInp({...inp});
                                            } } />
                                       </InputLine>
                            else  return <InputLine key={i}  label={title+`:`}>
                                      <Input  value={inp?.[aName] || ''}
                                            onChange={e => {
                                                inp[aName] = e.currentTarget.value||undefined;
                                                setInp({...inp});
                                            } } />
                                   </InputLine>
                        }
                        else return null;
                    })
                }
            </LineColumn>;
        },[inp,setInp]);

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'安全附件检验-安全阀'}>
                安全附件检验-安全阀:
                { partOf(0,5) }
                安全附件检验-爆破片装置:
                { partOf(6,11) }
            </InspectRecordLayout>
        );
    } );

//快开门式压力容器安全联锁装置：
export const QuickOpen=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            const {快开门联锁,其他阀门,备注,检查结果} =par||{};
            return {快开门联锁,其他阀门,备注,检查结果};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'安全附件检验-快开门式压力容器安全联锁装置'} column={0}>
                安全附件检验-快开门式压力容器安全联锁装置<br/>
                使用环境、校验周期、校验方法是否符合设计要求：
                <TextArea  value={inp?.快开门联锁 ||''} rows={5}
                           onChange={e => setInp({ ...inp, 快开门联锁: e.currentTarget.value||undefined}) } />
                其他阀门、附件检验：
                <TextArea  value={inp?.其他阀门 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 其他阀门: e.currentTarget.value||undefined}) } />
                安全附件检验-备注：
                <TextArea  value={inp?.备注 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 备注: e.currentTarget.value||undefined}) } />
                安全附件检验-检查结果：
                <TextArea  value={inp?.检查结果 ||''} rows={6}
                           onChange={e => setInp({ ...inp, 检查结果: e.currentTarget.value||undefined}) } />
            </InspectRecordLayout>
        );
    } );

//关键配置表：顺序固定不能改动！！
export const VsProjects默认=[{name:'压力容器定期检验结论',do:true,ha:'Conclusion'},{name:'压力容器资料审查',do:true,ha:'InformationReview'},
    {name:'宏观检验',do:true,ml:'压力容器宏观检查报告',ha:'Structural'},
    {name:'安全附件检验'},{name:'附加检验报告',ml:'附加检验报告',ha:'AdditionalTest'},{name:'壁厚测定',ha:'rp_thickmVs_'},{name:'强度校核'},{name:'射线检测'},{name:'超声检测',ml:'超声波检测报告'},
    {name:'衍射时差法（TOFD）超声检测',ha:'rp_tofd_'},{name:'磁粉检测'},{name:'渗透检测'},{name:'声发射检测'},{name:'光谱分析',ml:'材料成分分析（光谱分析）报告'},
    {name:'硬度检测'},{name:'金相分析'},{name:'耐压试验'},{name:'气密性试验'},{name:'氨检漏试验'},{name:'氦、卤素检漏试验'}];
//仅仅页面上用的路由hash字段 "ha": 不需要存储数据库给报告的。
const VsProjects_configPure=VsProjects默认.map(one=>{ const { ha, ...other}=one;
                    return {...other} } );
//项目列表：
export const ProjectList=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            //初始化的 Projects=空 -> 缺省值:要求挑选的大项目; 怎能增加，不允许删除和修改默认项目名字。
            const {Projects =VsProjects_configPure } =par||{};
            return {Projects};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const qs= queryString.parse(window.location.search);
        // console.log("向目标表点击切换的 graphql入口from=" , qs?.from??'不晓得');
        const [viewHas, setViewHas] = React.useState<boolean>(false);
        const [seq, setSeq] = React.useState<number | null>(Number(qs?.from));   //表對象的當前一條。
        const [obj, setObj] = React.useState<any>();        //Projects数组的各个对象
        // React.useEffect(() => {
        //     let size =inp?.Projects?.length;
        //     setSeq(size>0?  size-1:null);    //导致初始化显示最后一个seq
        // }, [inp]);
        React.useEffect(() => {
            let size = inp?.Projects?.length;
            let ifrom = Number(qs?.from);
            if (ifrom >= 0 && ifrom < size) {
                setSeq(ifrom);    //导致初始化显示最后一个seq
                setObj(inp?.Projects?.[ifrom]);
            } else {
                setSeq(null);
                setObj(null);
            }
        }, [qs?.from ]);
        //这上面副作用：,inp?.Projects不能随意增加 依赖项哦，也不能用[qs])替代，qs会导致点击修改菜单后也会重复刷新的。【不要加】inp?.Projects依赖项，导致尾部插入的会跳到qs?.from那一条显示，不合理。
        function onModifySeq(idx:number,it:any){
            setObj(it);
            setSeq(idx);
        };
        function onDeleteSeq(idx:number,it:any){
            let fixSize =VsProjects默认.length;
            if(idx<fixSize)  return;  //不允许删除
            inp?.Projects?.splice(idx,1);
            setInp({...inp,Projects: [...inp?.Projects] });
            setSeq(null);
        };
        function onInsertSeq(idx:number,it:any){
            let fixSize =VsProjects默认.length;
            if(idx<fixSize)  return;    //不允许从默认项目列表中间插入自定义的东西
            inp?.Projects?.splice(idx,0, obj);
            setInp({...inp,Projects:[...inp?.Projects] });
            setSeq(idx);
        };
        function onAddSeq(idx:number){
            let size =inp?.Projects?.push(obj);
            setInp( (inp?.Projects&&{...inp,Projects:[...inp?.Projects] } )  || {...inp,Projects:[obj] } );
            //应该跳到最后一条：不能停留倒数第二条 当前from 当前按钮那条；
            setSeq((inp?.Projects&&(size-1))  || 0 );
        };
        //本对象组件：是共享的，状态交互注意。
        const editor=(fixed: boolean, tail: boolean) => <Layer elevation={"sm"} css={{ padding: '0.25rem' }}>
            <div>
                <InputLine label={`有做该项目吗:`}>
                    <CheckSwitch  checked= {obj?.do || false}
                                  onChange={e =>setObj({...obj, do: (obj?.do? undefined:true)} ) } />
                </InputLine>
                <InputLine label={`检验项目}`}>
                    <Input   value={obj?.name ||''}  disabled={fixed}
                             onChange={e =>setObj({...obj, name: e.currentTarget.value} ) } />
                </InputLine>
                <InputLine label={`检验结果`}>
                    <Input   value={obj?.res ||''}
                             onChange={e =>setObj({...obj, res: e.currentTarget.value} ) } />
                </InputLine>
                <InputLine label={`说明`}>
                    <Input   value={obj?.memo ||''}
                             onChange={e =>setObj({...obj, memo: e.currentTarget.value} ) } />
                </InputLine>
                目录页显示的自定义部分：
                <InputLine label={`页号`}>
                    <Input   value={obj?.page ||''}
                             onChange={e =>setObj({...obj, page: e.currentTarget.value} ) } />
                </InputLine>
                <InputLine label={`附页、附图`}>
                    <Input   value={obj?.apx ||''}
                             onChange={e =>setObj({...obj, apx: e.currentTarget.value} ) } />
                </InputLine>
                <Button onPress={() => {
                    if(seq !== null) {
                        inp?.Projects?.splice(seq, 1, obj);
                        setInp({ ...inp, Projects: [...inp?.Projects] });
                    }
                    else setInp({ ...inp, Projects: [...inp?.Projects ,obj] });
                } }
                >{tail? `新增一条` : `改一条就确认`}</Button>
            </div>
        </Layer>;
        //项目明细编辑器的显示：依赖Projects数组索引i来判定的。页面上名义的顺序序号不等于这个的，要转换？链接生成时刻就要敲定了。新增加的又删除导致序号跳变?【默认】项目不允许删除而且在前面。
        const myTable=<div>
            {inp?.Projects?.map((a:any,i:number)=>{
              if((viewHas && a?.do) || !viewHas)
                return <React.Fragment  key={i}>
                    <div>{`${i+1}`}
                        <Popover>
                            <PopoverRefer>
                                <Button  size="md" iconAfter={<IconChevronDown />} variant="ghost" css={{whiteSpace:'unset'}}>
                                    {`${a?.name||'？'} [${a?.do? '有做':'没做'}] `}
                                </Button>
                            </PopoverRefer>
                            <PopoverContent>
                                <PopoverDescription>
                                    <MenuList>
                                        <MenuItem onPress={()=>onModifySeq(i,a)}>修改</MenuItem>
                                        <MenuItem onPress={()=>onDeleteSeq(i,a)}>刪除这条</MenuItem>
                                        <MenuItem onPress={()=>onInsertSeq(i,a)}>插入一条</MenuItem>
                                        <MenuItem onPress={()=>onAddSeq(i)}>末尾新增一条</MenuItem>
                                    </MenuList>
                                </PopoverDescription>
                                <PopoverClose>
                                    <IconX/>
                                </PopoverClose>
                            </PopoverContent>
                        </Popover>
                    </div>
                    {i===seq && editor(i<VsProjects默认.length, false) }
                </React.Fragment>;
              else return null;
            }) }
        </div>;
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'压力容器定期检验报告附页-包括的项目'} column={0}>
                <Text  variant="h5">
                    压力容器定期检验报告附页-包括的项目
                </Text>
                <Button intent='primary' onPress={() => setViewHas(!viewHas)}
                >{viewHas? `显示全部项目`: `仅显示有做的项目`}</Button>
                默认项目表的部分不能删除，不能改名字;
                <hr/>
                {myTable}
                { seq===null && editor(false, true) }
            </InspectRecordLayout>
        );
    } );

const checkConfig静电=[['测试仪器型号','静电测试仪器'],['仪器精度','静电测试精度'],['导静电电阻','导静电电阻'],['连接处电阻','连接处电阻'],
    ['真空仪型号','真空仪型号'],['仪器精度','真空仪精度'],['空载时真空度','空载真空度'],['承载时真空度','承载真空度'],['真空泵型号','真空泵型号'],
    ['抽真空时间','抽真空时间'],['罐内真空度','罐内真空度'],['置换介质','抽空置换介质'],['置换压力','抽空置换压'],['排放后罐内压力','排放后压力'],['罐内气体含氧量','含氧量']];
export const AdditionalTest=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig静电.map(([ _,aName], i:number)=> {
                const namexD = `${aName}_D`;
                fields[aName] =par[aName];
                fields[namexD] =par[namexD];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附加检验-导静电装置检查'} column={0}>
                附加检验-导静电装置检查:
                {
                    checkConfig静电.map(([title,aName], i:number)=> {
                        return <React.Fragment key={i}>
                            {i===4 && '安全附件检验-绝热层真空度检查:'}
                            {i===8 && '安全附件检验-罐体抽真空 、气体置换:'}
                                <InputLine  label={title+`:`}>
                                    <Input  value={inp?.[aName] || ''}
                                            onChange={e => {
                                                inp[aName] = e.currentTarget.value||undefined;
                                                setInp({...inp});
                                            } } />
                                </InputLine>
                        </React.Fragment>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

const checkConfig腐蚀=[['介质名称','腐蚀介质名称'],['腐蚀介质成分','腐蚀介质成分'],['腐蚀介质含量','腐蚀介质含量'],['腐蚀速度','腐蚀速度'],
    ['腐蚀机理','腐蚀机理'],['其他检验、检测','附加检验其他'],['备注','附加检验备注'],['检测结果','附加检测结果']];
export const Corrosive=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig腐蚀.map(([ _,aName], i:number)=> {
                fields[aName] =par[aName];
                return null;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附加检验-腐蚀介质含量测定'} column={0}>
                附加检验-腐蚀介质含量测定:
                {
                    checkConfig腐蚀.map(([title,aName], i:number)=> {
                        return <React.Fragment key={i}>
                            {i===5 && <>附加检验报告<br/></>}
                            {i===6 && '附加检验报告-'}
                            {(i>4)?
                                <>
                                 {title+`:`}
                                  <TextArea  value={inp?.[aName] || ''} rows={i===7? 3 : 6}
                                               onChange={e => {
                                                   inp[aName] = e.currentTarget.value||undefined;
                                                   setInp({...inp});
                                         } } />
                                </>
                                :
                                <InputLine  label={title+`:`}>
                                    <Input  value={inp?.[aName] || ''}
                                            onChange={e => {
                                                inp[aName] = e.currentTarget.value||undefined;
                                                setInp({...inp});
                                            } } />
                                </InputLine>
                            }
                        </React.Fragment>;
                    })
                }
            </InspectRecordLayout>
        );
    } );

export const ItemPerformance=
    React.forwardRef((
        { children, show ,alone=true}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            const {使用压力,使用温度,工作介质,检查依据,问题及处理} =par||{};
            return {使用压力,使用温度,工作介质,
                检查依据:检查依据??'《固定式压力容器安全技术监察规程》（TSG21-2016）',
                问题及处理 };
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'检验结论-性能参数'} column={0}>
                检验结论报告 - 性能参数<br/>
                允许直接修改部分
                <InputLine  label='使用压力' >
                    <Input  value={inp?.使用压力 ||''}
                            onChange={e => setInp({ ...inp, 使用压力: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='使用温度' >
                    <Input  value={inp?.使用温度 ||''}
                            onChange={e => setInp({ ...inp, 使用温度: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='工作介质' >
                    <Input  value={inp?.工作介质 ||''}
                            onChange={e => setInp({ ...inp, 工作介质: e.currentTarget.value||undefined}) } />
                </InputLine>
                <InputLine  label='检查依据' >
                    <Input  value={inp?.检查依据 ||''}
                            onChange={e => setInp({ ...inp, 检查依据: e.currentTarget.value||undefined}) } />
                </InputLine>
                问题及其处理
                <TextArea  value={inp?.问题及处理 ||''} rows={10}
                           onChange={e => setInp({ ...inp, 问题及处理: e.currentTarget.value||undefined}) } />
            </InspectRecordLayout>
        );
    } );


